<template>
	<view class="container">
		<block v-if="isload">
			<form @submit="formSubmit" @reset="formReset">
				<view class="form">
					<view class="form-item">
						<text class="label">城市</text>

						<uni-data-picker :localdata="items" :border="false" :placeholder="regiondata || '请选择省市区'"
							@change="regionchange" ref="picker"></uni-data-picker>
					</view>
				</view>
				<button class="set-btn" form-type="submit" :style="{background:''+t('color1')+''}">保 存</button>
			</form>
		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
	var app = getApp();

	export default {
		data() {
			return {
				opt: {},
				loading: false,
				isload: false,
				menuindex: -1,
				textset: {},
				birthday: '',
				items: [],
				regiondata: '',
				area:'',
				city:'',
				province:''
			};
		},

		onLoad: function(opt) {
			let that = this;
			that.opt = app.getopts(opt);
			that.loaded();
			app.get('Index/getCustom', {}, function(customs) {
				var url = app.globalData.static_url + '/static/area.json';
				uni.request({
					url: url,
					data: {},
					method: 'GET',
					header: {
						'content-type': 'application/json'
					},
					success: function(res2) {
						that.items = res2.data
					}
				});
			});
		},
		onPullDownRefresh: function() {
			//this.getdata();
		},
		methods: {
			formSubmit: function(e) {
				var formdata = e.detail.value;
				var regiondata = this.regiondata
				if (regiondata == '') {
					app.alert('请选择城市');
					return;
				}
				app.showLoading('提交中');
				app.post("My/setfield", {
					province:this.province,
					city: this.city,
					area:this.area
				}, function(data) {
					app.showLoading(false);
					if (data.status == 1) {
						app.success(data.msg);
						setTimeout(function() {
							app.goback(true);
						}, 1000);
					} else {
						app.error(data.msg);
					}
				});
			},
			regionchange(e) {
				const value = e.detail.value
				console.log(value[0].text + ',' + value[1].text + ',' + value[2].text);
				this.regiondata = value[0].text + ',' + value[1].text + ',' + value[2].text;
				this.area = value[2].text;
				this.city = value[1].text;
				this.province =value[0].text
			},
			bindDateChange: function(e) {
				this.birthday = e.detail.value;
			},
		}
	};
</script>
<style>
	.form {
		width: 94%;
		margin: 20rpx 3%;
		border-radius: 5px;
		padding: 20rpx 20rpx;
		padding: 0 3%;
		background: #FFF;
	}

	.form-item {
		display: flex;
		align-items: center;
		width: 100%;
		border-bottom: 1px #ededed solid;
		height: 98rpx;
		line-height: 98rpx;
	}

	.form-item:last-child {
		border: 0
	}

	.form-item .label {
		color: #000;
		width: 200rpx;
	}

	.form-item .input {
		flex: 1;
		color: #000;
	}

	.form-item .picker {
		height: 60rpx;
		line-height: 60rpx;
		margin-left: 20rpx;
		flex: 1;
		color: #000;
	}

	.set-btn {
		width: 90%;
		margin: 60rpx 5%;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 48rpx;
		color: #FFFFFF;
		font-weight: bold;
	}
</style>